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A WEBSITE DISPLAY EMULATING A DISPLAY OF 
AN APPLICATION PROGRAM 

TECHNICAL FIELD 

The present invention relates in general to a graphical display of a website. More 
particularly, the present invention relates to configuring the graphical display of a website to 
emulate the look and feel of an application program. 

BACKGROUND 

The graphical display of a typical application program provides a continuity of 
appearance that is comforting to the user. By way of example, the display of an application 
program may include objects or information that are dynamically modified within a seemingly 
fixed background. The appearance of a fixed background may be accomplished by way of 
common reference points that remain on the display screen as the other object or information are 
modified. In addition, the display of an application program typically includes a four-sided 
border that provides a finite and concrete appearance. 

In contrast to an application program, a website tends to provide a graphical 
display that is not perceived by the user as being continuous, finite or concrete. A website may 
comprise multiple webpages, each webpage containing different data elements. Modem web 
browsers operate to load different webpage in succession into a main display area. Successive 
loading of webpages results in a discontinuity of appearance because no common reference point 
remains within the main display area as the first webpage disappears and the second webpage is 
loaded. In some cases, a disconcerting whitespace may even be displayed between successive 
webpages. 

In addition, most webpages lack a clearly-defmed right or bottom edge. The 
designer of a webpage thus has the abihty to design a display that is infinitely tall and/or wide. 
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Web browsers are typically configured to include scroll bars along the right and bottom edges of 
the display area in order to permit the user to view data that does not fit within the display area. 
Accordingly, depending on the size of the display screen and the display area of the browser, the 
appearance of the webpage may differ each time it is accessed by the user. 
5 Therefore, there is a need in the art for configuring the graphical display of a 

website to have the look and feel of an appUcation program. 

SUMMARY OF THE INVENTION 

Generally stated, the present invention is directed to simulating the look and feel 
10 of an application program within a website. A web browser retrieves a border webpage file that 
contains an instruction set for creating a border webpage that include a four-sided border. The 
four-sided border surrounds a main display area within the web browser display window. The 
~'l four-sided border mimics a four-sided border that typically appears around the display of an 

^ j application program. The four-sided border is created through the use of a table construct that is 
;J 15 preferably dimensioned to have three rows and three columns. This table configuration yields a 
11 single center cell surrounded by eight border cells. The center cell may be used as the main 

11 - display area of the web browser window. The center cell of the table may contain an inline 
frame for displaying a content webpage, while the border cells may be used for the display of 
1 1 border images that combine to form the four-sided border. The border images may comprise 

=1* 20 repeating images that are tiled end-to-end throughout each border cell. 

One embodiment of the invention may include various selectable graphic objects 
positioned external to the four-sided border. For example, the web browser window may be 
partitioned into two frames, a first fi-ame containing a webpage that includes the selectable 
graphic objects and the second frame containing the border webpage with its four-sided border 
25 and inline frame. The selectable graphic objects may be used to emulate a table of contents, 
selectable menu, tree structure, or other application functions. Each selectable graphic object 
may be selected by way of a user input command in order to navigate between different content 
webpages within a website, or to duplicate other application-like functionality. In the event that 
a selectable graphic object is used to navigate from one content webpage to another, the border 
30 webpage displaying the four-sided border may remain static, while the content webpage 
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displayed in the inline frame changes. This provides continuity in appearance as a user navigates 
from one page to the next. 

That the invention improves upon the drawbacks of prior website displays and 
accomplishes the advantages described above will become apparent from the following detailed 
description of the exemplary embodiments and the appended drawings and claims. 

BRIEF DESCRIPTION OF THE DRAWINGS 

FIG. 1 is a block diagram illustrating an exemplary operating environment for the 
exemplary embodiments of the present invention. 

FIG. 2 is an illustration of an exemplary graphical display of a web site within a 
web browser in accordance with an exemplary embodiment of the present invention. 

FIG. 3, comprising FIG. 3 A and FIG, 3B, illustrates a website display that has 
been configured to resemble the display of an application program in accordance with an 
exemplary embodiment of the present invention. 

FIG. 4 is a flowchart illustrating operation of an exemplary method for 
configuring a website display to resemble the display of an application program. 

DETAIELED DESCRIPTION OF A PREFERRED EMBODIMENT 

The present invention is directed to displaying content in a web browser in such a 
manner as to emulate the look and feel of an apphcation program. In accordance with an 
exemplary embodiment of the invention, a plurality of webpages are displayed in the window of 
a web browser in such a way as to produce a graphical display having a content display area 
bounded by a four-sided border. The four-sided border resembles a border surrounding the 
display of a typical application programs. In an exemplary embodiment, webpages are defined 
by webpage data files written in hypertext markup language ("HTML"). However, altemate 
embodiments may include webpage data files written using extensible markup language 
("XML"), server-parsed hypertext markup language ("SHTML"), Javascript, Java, and so on. 
Thus, it is to be understood that the scope of the present invention is not restricted by a particular 
programming language and any references herein to HTML should be read by way of illustration 
and not by way of limitation. 
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Referring now to the drawings, in which like numerals represent like elements 
throughout the several figures, aspects of the present invention and a suitable operating 
environment will be described. The following sets forth the best mode of the invention as known 
to the inventors. 

5 FIG. 1 and the following discussion are intended to provide a brief, general 

description of a suitable computing environment in which the invention may be implemented. 
While the invention will be described in the general context of a web browser apphcation 
program executed by a personal computer in communication with a network, those skilled in the 
art will recognize that the invention may also be implemented in other environments and in 
10 combination with other program modules. Generally, program modules include routines, 
programs, components (such as stacks or caches), data structures, etc., that perform particular 
tasks or implement particular abstract data types. Moreover, those skilled in the art will 
11 appreciate that the invention may be practiced with other computer system configurations, 
!j including hand-held devices, multiprocessor systems, microprocessor-based or programmable 
^ 15 consumer electronics, minicomputers, mainframe computers, and the like. The invention may 
li also be practiced in distributed computing environments where tasks are performed by remote 

I processing devices that are linked through a communication network. In a distributed computing 

environment, program modules may be located in both local and remote memory storage 
i devices. 

I 20 As shown in FIG. 1, the present invention may be implemented in a traditional 

f client-server environment. In accordance with an exemplary embodiment of the present 

invention, a border webpage data file 103 A, or other data file, may produce a border webpage 
105A when loaded into a web browser 112. The border webpage 105A includes table construct 
102. The table 102 is preferably configured with three rows and three columns of cells, 
25 comprising a single center cell and eight border cells. Border images are displayed in the eight 
border cells. The border images combine to form the four- sided border 107. It should be 
appreciated that reference to a four-sided border is intended to signify a border that surrounds a 
main display area within a web browser. Accordingly, any border having greater or fewer than 
four sides that surrounds a main display area within a wed browser is also contemplated by the 
30 invention. The center cell of the table 102 includes an inline frame for the display of a content 
webpage 105B. The content webpage 105B results fi-om loading a content webpage data file 
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103B into the inline frame of the border webpage 105A. The combination of the border 
webpage 105 A and the content webpage 105B results in a graphical display for a website that 
emulates the display of an application program. 

Typically, webpage data files 103A&B are stored on a server 104 connected to a 
5 network 106. Multiple related webpages may comprise a website. Alternate embodiments may 
store webpage data files 103 A and/or 103B locally at the chent 108 A, or as distributed files on 
different elements of the network 106, The network 106 may comprise an internet, an intranet, a 
telephone wireline network, a cellular network, a broadband network, or any other wire-based 
and/or wireless network. The network 106 also connects to clients 108 A - 108N, which are 
10 operated by end users. As mentioned, clients 108A - 108N may access webpage data files 
103A&B by using a web browser 112, or similar apphcation program, to connect to the server 
104 via the network 106. The web browser 112 interprets a webpage data file 103A&B and 

^1 displays a resulting webpage 105A&B. Typically, an end user may view the graphical display of 

y a webpage 105A&B through a display monitor 116 connected to the cUent 108A. 

fl 15 FIG. 2 is an illustration of an exemplary graphical display of a web site within a 

web browser 112 in accordance with an exemplary embodiment of the present invention. To 

H achieve the appearance of a four-sided border surrounding a webpage that normally has no right 

or bottom boundary, an exemplary embodiment of the present invention makes use of a border 

II webpage 105A and a content webpage 105B displayed within the web browser window 201. 

II 

II 20 The border webpage 105A includes a table construct 102 consisting of multiple cells. Li one 
embodiment, the table 102 may be defined to consist of nine cells, organized in three columns by 
three rows. Such a table configuration results in a single center cell 203 bounded by eight border 
cells 202A-H. The border cells 202A-H of the table 102 may be used for the display of border 
images, which combine to produce the four-sided border. The center cell 203 may include an 

25 inhne frame that is used for displaying a content webpage 105B. An inline frame is an HTML 
element that is well known in the art. As shown in FIG. 2, the center cell 203 may be sized to 
occupy the majority of the border webpage 105A. 

Optionally, the web browser window 201 may be partitioned into a first frame 
204A and a second frame 204B, or any other number of frames. The border webpage 105B may 

30 be displayed in the second frame 204B, while one or more selectable graphic objects 240 may be 
displayed in the first frame 204A. Briefly, a selectable graphic object 240a may configured to 
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include hyperlinks and may serve to emulate a function of an application program. The concept 
of selectable graphic objects will be discussed in more detail with respect to FIG. 3. 

The dimensions of the table 102 may be set to equal the entire display area of the 
web browser window 201 or the frame 204B in which the border webpage 105A is displayed. In 
5 an exemplary embodiment, the HTML commands "<table width^lOO%>" and 
"<table height=100%>" may be used to define the table dimensions relative to the size of the 
display area, rather than as absolute values. Dimensioning the table relative to the size of the 
display area ensures that the table 102 resizes proportionately when the web browser window 
201 is resized. 

10 A scripting language, such as JavaScript, may be used in an exemplary 

embodiment to ensure that the web browser window 201 may not be resized below a certain 
point. This minimum resize point may be defined as the size at which the browser would 
Q normally cause scroll bars to appear within the web browser window 201. By limiting the 

%i minimum size of the web browser window 201, scroll bars will be suppressed and the content 

15 webpage 105B will be resized so that its contents will be visible within the center cell 203 of the 
!1f table 102. The above-mentioned scripting may be implemented in a manner well known to those 

:|l skilled in the art. 

^ * The individual cells of the table 102 may be defined in such a manner that the 

ill center cell 203 is of a variable size, and all border cells 202 A-H are of a fixed size in at least one 

20 dimension. In this manner, the dimensions of the center cell 203 are directly tied to the 
dimensions of the web browser window 201 or the fi:ame 204B. Those skilled in the art will 
appreciate that the dotted fines defining the table 102 in FIG. 2 are for illustrative purposes only. 
The table 102, including ail cell borders and the overall table border, may be made to be invisible 
when displayed in order to provide the illusion of a single display area with no visible joins 
25 between cells. 

The four comer border cells 202A, 202C, 202E, and 202G of the table 102 may 
each display a unique border image designed to mimic a comer of a four-sided border. That is, 
the upper left comer border cell 202A may contain a border image 207A designed to mirror the 
upper left comer of a four-sided border, the upper right comer border cell 202C may contain a 
30 border image 207C mimicking the upper right comer of a four-sided border, and so on. The 
upper left comer border cell 202A is located in row 1, column 1 of the table 102. The upper 
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right comer border cell 202C is located in row 1, column 3 of the table 102. The lower right 
comer border cell 202E is located in row 3, column 3 of the table 102. The lower left comer 
border cell 202G is located in row 3, column 1. Depending on the desired border, the four 
comer border cells 202A, 202C, 202E, and 202G may display identical border images or 
5 different border images. For example, the four comer border cells 202A, 202C, 202E, and 202G 
shown in FIG. 2 each display a different border image, namely border images 207A, 207C, 
207E5 and 207G respectively, because the shape of each border image must be rotated to match 
each comer. 

The top center border cell 202B and bottom center border cell 202F may both 
10 extend along the entire width of the center border cell 203. The top center border cell 202B is 
located in row 1, column 2, while the bottom center border cell 202F is located in row 3, column 
2 of the table 102. Similarly, the left center border cell 202H (located in row 2, column 1) and 
right center border cell 202D (located in row 2, column 3) may each extend along the height of 
the center cell 203. Horizontal border images 207B&F are displayed in both the top and bottom 
: 15 center border cells 202B&F, respectively, extending across the entire length thereof The 
II horizontal border images 207B&F displayed in the top and bottom center border cells 202B&F 

I may be identical, as shown in the figure. Alternate embodiments may display different 

horizontal border images in the top center border cell 202B and the bottom center border cell 
I 202F. 

I 20 A single horizontal border image 207B is shown in the figure. However, using a 

I single horizontal border image to fill a border cell may lead to distortion of the horizontal border 

image if the web browser window 201 and table 102 are resized in the horizontal direction. 
Therefore, the horizontal border image 207B may actually comprise multiple discrete horizontal 
border images that are repeated end-to-end within the top center border cell 202B. In the likely 
25 event that the top center border cell 202B does not acconmiodate an even number of discrete 
horizontal border images, one or more of the discrete horizontal border images may be tmncated. 
The horizontal border image 207F within the bottom center border cell 202F may also comprise 
repeated discrete horizontal border images. The process of repeating an image end-to-end is 
commonly known as "tiling." Tiling a horizontal border image 207B&F within a border cell 
30 provides an illusion of a seamless horizontal border image within that border cell and reduces 
distortion due to manipulating the dimensions of the image itself 
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The vertical border images 207D&H shown in the right center border cell 202H 
and the left center border cell 202H, respectively, may also be tiled to reduce image distortion 
when the browser window 201 and the table 102 are resized in the vertical direction. The 
vertical border images 207D&H displayed in the right and left center border cells 202D&H may 
be identical, as shown in the figure. Alternate embodiments may display different vertical border 
images in the right center border cell 202D and left center border cell 202H. 

In the event that the web browser window 201 or frame 204B displaying the 
border webpage 105 A is resized, the table 102 of the border webpage 105 A is necessarily resized 
as well According to one embodiment of the invention, when the table 102 is resized, the 
individual cells 202 A-H of the table 102 may be resized in different manners, based on their 
position within the table 102. For example, as the web browser window 201 or frame 204B 
changes in size, cells occupying the first and third rows of the table 102 may be made to 
maintain a constant height, while cells occupying the second row of the table 102 may be resized 
in height. Similarly, cells in the first and third columns of the table 102 may be made to 
maintain a constant width, while the width of cells in the second column of the table 102 may 
change along with the width of the web browser window 210 or the frame 204B. Table 1 below 
summarizes the fixed and variable dimensions of each cell 



Table 1 - FixedA^ariable Dimensions of Cells 


Cell 


Width 


Height 


Upper lefl; border 202A 


Constant 


Constant 


Top center border 202B 


Variable 


Constant 


Upper right border 202C 


Constant 


Constant 


Right center border 202D 


Constant 


Variable 


Lower right border 202E 


Constant 


Constant 


Bottom center border 202F 


Variable 


Constant 


Lower left border 202G 


Constant 


Constant 


Left center border 202H 


Constant 


Variable 


Center 203 


Variable 


Variable 
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Using the fixed and variable cell dimensions shown above in Table 1, will allow 
the thickness of the four-sided border 107 to remain constant as it expand or contracts in height 
and/or width to fit the display area of the web browser window 201 or the fi:*ame 204B. 
Expanding the center border cells 202B, 202D, 202F and 202H in only one dimension avoids 
5 any undue warping or stretching of the tiled border images. As each center border cell 202B, 
202D, 202F and 202H is resized, the border image contained within that cell is retiled 
accordingly. The center cell 203 may be resized along the horizontal and vertical directions in 
direct proportion to any resizing of the table 102, As shown in Table 1 above, no comer border 
cells 202A, 202C, 202E, 202G are resized in an exemplary embodiment so as to maintain 
10 consistent comer border images 207A, 207C, 207E, and 207G. Altemate embodiments may 
resize various cells of the table 102 in different manners without departing from the spirit or 
scope of the invention. 

Q As mentioned, one or more selectable graphic objects 240 may be displayed in a 

first frame 204A of the web browser window 201. The selectable graphic objects 240 may be 
'fil 15 used within the web browser 112 to enhance the look and feel of an apphcation program. 
111 Selectable graphic objects 240 may, for example, correspond to the menu layout of many 

common apphcation programs. By way of illustration, multiple selectable graphic objects 240 
f may be used to represent a menu layout, wherein each selectable graphic object may bear a 

111 hierarchical relationship to other selectable graphic objects. For example, multiple selectable 

20 graphic objects 240 may be arranged in a "tree" stracture, wherein a first level of selectable 
graphic objects 240 represents a geographical region, a second level of selectable graphical 
objects 240 represents individual cities within the geographical region, a third level of selectable 
graphic objects 240 represents different buildings within each city, and a fourth level of 
selectable graphic objects 240 represents floors within each building. Within a tree-like 
25 stracture, a subordinate selectable graphic object 240 may be hidden from view until the 
corresponding dominant selectable graphic object is selected. The selectable graphic objects 240 
may contain hyperlinks used to navigate from one content webpage 105B to another. 

Selectable graphic objects 240 may also be displayed internal to the four-sided 
border 107. When selectable graphic objects 240 are displayed inside the four-sided border 107 
30 and are used for navigation between content webpages 105B, any subsequently loaded content 
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webpage 105B should be loaded into the center cell 203 (i.e., into the inUne frame) of the table 
102 of the border webpage 105 A. 

FIG. 3, comprising FIG. 3A and FIG. 3B, illustrates a website display that has 
been configured to resemble the display of an apphcation program in accordance with an 
5 exemplary embodiment of the present invention. Beginning with FIG. 3A, a web browser 
window 201 is shown having a first frame 204 A and a second frame 204B. Displayed in the first 
frame 204A is a first webpage that includes several selectable graphic objects 240 arranged in a 
tree structure. Although not plainly apparent to the user, displayed in the second frame 204B is a 
border webpage 105A and a content webpage 105B. The border webpage 105A displays the 
10 four-sided border 107. The four-sided border is made up of individual border images displayed 
in the border cells of an invisible table construct. An inline frame is included in the center cell of 
the invisible table. The content webpage 105B is displayed by the inline frame. Thus, the 
content webpage 105B is surrounded by a border, which helps to provide the website with a look 
and feel of an application program. 
: 15 The selectable graphic objects 240 may be configured with hyperlinks to allow 

the user to enter navigation commands. In particular, a prior selection of the "Atlanta - R&D 
Facility" selectable graphic object 240A triggered the activation of a hyperlink to the content 
webpage 105B that is displayed in the second frame 204 A. Within the tree structure of 
selectable graphic objects 240, selection of a dominant graphical object may cause the display of 
I 20 a previously hidden subordinate graphical object. By way of illustration, the "1^^ Floor" 
f selectable graphic object 204B is flanked by a "+" icon to indicate that subordinate graphical 

images are hidden from view. Selection of the "1^^ Floor" selectable graphic object 204B will 
result in the display of a "Participating Vendors" selectable graphic object 240C, a "AHU-1" 
selectable graphic object 204D, and a "Main Conference Room" selectable graphic object 204E, 
25 as is shown in FIG. 3B. As is also shown in FIG. 3B, selection of the "Main Conference Room" 
selectable graphic object 204E results in the display of additional subordinate selectable graphic 
objects and the activation of a hyperlink to the new content webpage 105B displayed in the 
second frame 204B. Thus, it may be seen that the selectable graphic objects in the first frame 
204 A may be used to navigate among content webpages 105B in the second frame 204B, while 
30 the border webpage 105 A and its four-sided border 107 remain static. 
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FIG. 4 is a flowchart illustrating an exemplary method 400 for configuring the 
display of a website with a four-sided border. The flowchart begins at starting block 401 and 
proceeds to step 405, where a user operates a web browser to access a website that is defined by 
an underlying border webpage data file and a plurality of content webpage data files. The web 
5 browser loads the border webpage data file in step 410. In step 415, the web browser interprets 
the border webpage data file and displays the resulting border webpage. The border webpage 
includes a table construct that preferably comprises a center cell and a plurality of border cells. 
Border images may be displayed within the border cells of the table in such a manner as to form 
a four-sided border around the center cell. Border images may be defined by any image data file 
10 format, such as "jpeg," "bmp," "pict," "tiff "gif," etc. The center cell may be configured to 
include an inline fi*ame that functions as an independent web browser. At step 420, a content 
webpage data file is retrieved and interpreted by the inline frame and the resulting content 
C| webpage is displayed in the center cell of the table. 

rji At step 425 the web browser awaits a user input comprising a navigation 

15 command or a window/frame resize command. A window/frame resize command instructs the 
\ll web browser to alter the size of the web browser display window, or a frame thereof^ and its 

II contents. A navigation command instructs the browser to access and interpret another content 

' , webpage data file and to display the resulting content webpage. At step 430, the web browser 

II determines whether a received user input conamand comprises a navigation command. If so, the 

=5l 20 method progresses to step 435 where another content webpage is loaded into the center cell of 
2^ the table of the border webpage. It should be noted that the border webpage remains static as the 

5S.i- 

navigation command is executed. After completing a navigation command at step 435, the 
method returns to step 425 to poll for further user input. 

If it is determined at step 430 that the user input command is not a navigation 

25 command, the method proceeds to step 440, where it is determined whether the input command 
is a window/frame resize command. If a window/frame resize command is detected, a 
determination may be made at step 445 as to whether execution of the resize command would 
cause the web browser window or frame to be smaller than a predetermined minimum size. As 
previously mentioned, the predetermined minimum size may be set in order to prevent the web 

30 browser from automatically displaying scroll bars. If execution of the resize command would 
cause the web browser window or frame to be smaller than the predetermined minimum size, the 
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browser window or frame is instead resized to the predetermined minimum size at step 450. 
However, if execution of the resize command would not cause the web browser window or frame 
to be smaller than the predetermined minimum size, the resize command is executed at step 455. 

When the web browser window or frame thereof is resized at step 450 or step 455, 
5 the border webpage is resized accordingly, including its table and the inline frame, at step 460 
and the border images within the border cells of the table are retiled at step 465. Those skilled in 
the art will appreciate that resizing the web browser window or frame, the border webpage, and 
the content webpage may, in practice, occur at the same time or in a difference sequence than 
described above. Thus, the above description is provided merely to illustrate the logical 
10 operation of an exemplary embodiment of the invention and is not intended to be limiting as to 
the sequence or timing of the steps. Following step 460, the method is repeated by returning to 
step 425 and polhng for further user input. 
Gl From a reading of the description above pertaining to exemplary embodiments of 

v| the present invention, modifications and variations thereto may become apparent to those skilled 

15 in the art. For example, those skilled in the art will appreciate that the present invention may be 
\^ practiced in conjunction with any program module capable of displaying webpages and is thus 

ii| not limited by the above recitations of a web browser. Many other modifications and additional 

f . features will also become evident in view of the preceding description of exemplary 

111 embodiments of the invention. It should be appreciated that many features and aspects of the 

i4ii 20 present invention are described above by way of example only and are therefore not intended to 
be interpreted as required or essential elements of the invention, unless so stated. Accordingly, 
the foregoing relates only to certain embodiments of the invention and numerous changes may be 
made therein without departing from the spirit and scope of the invention as defined by the 
following claims. 

25 
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